<template>

	<view class="menu-list">
		<view class="list-cell list-cell-arrow" v-for="item in list" :key="item.id" @tap="openForm3(item)">
			<view class="title-container">
				<text class="title">{{ truncateText(item.content, 14) }}</text>
			</view>
			<view class="title-container">
				<text class="sub-title">{{ item.acceptSituation }} </text>
				<uni-dateformat style="margin: 0 auto;" :date="item.createTime"></uni-dateformat>
			</view>
		</view>

		<uni-load-more :status="loadStatus" :content-text="{ contentdown: '上拉加载更多' }" @tap="loadMore" />
	</view>
</template>

<script>
	import * as ReportingApi from '@/api/report/reporting';

	export default {
		name: "verify",
		components: {

		},
		data() {
			return {
				loadStatus: '',
				// 遮罩层
				loading: true,
				// 导出遮罩层
				exportLoading: false,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 随手拍列表
				list: [],
				// 是否展开，默认全部展开
				isExpandAll: true,
				// 重新渲染表格状态
				refreshTable: true,
				// 选中行
				currentRow: {},
				// 查询参数
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					userId: ''
				},
			};
		},
		created() {
			// this.getList();
		},
		onShow() {
			this.getList();
		},
		onLoad() {
			this.getList()

		},

		methods: {
			btn1() {
				uni.navigateTo({
					url: `/pages/work/ewm/index`
				});
			},
			//获取登录用户信息
			// getUser() {
			// 	getUserProfile().then(response => {
			// 		this.getList(response.data.dept.deptCode);
			// 	})
			// },

			// 标题显示超过字数用...代替
			truncateText(text, maxLength) {
				if (text.length > maxLength) {
					return text.substring(0, maxLength) + '...';
				}
				return text;
			},

			/** 查询列表 */
			async getList() {
				try {
					//获取全局openid
					const app = getApp();
					const openId = app.globalData.openId;

					if (openId == null) {
						this.queryParams.userId = '8848'
					} else {
						// 将 openId 赋值给 queryParams 的 creator 
						this.queryParams.userId = openId;
					}

					this.loadStatus = 'loading';
					const res = await ReportingApi.getReportingPage(this.queryParams);
					if (this.queryParams.pageNo === 1) {
						this.list = res.data.list
					} else {
						this.list = [...this.list, ...res.data.list];
					}
					this.total = res.data.total;
					if (this.list.length >= res.data.total) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'more';
					}
					this.list.forEach((item) => {
						if (item.acceptSituation == 0) {
							item.acceptSituation = '重复举报'
						} else if (item.acceptSituation == 1) {
							item.acceptSituation = '已受理'
						} else if (item.acceptSituation == 2) {
							item.acceptSituation = '被办结'
						} else if (item.acceptSituation == 3) {
							item.acceptSituation = '不予受理'
						} else if (item.acceptSituation == null || item.acceptSituation == undefined) {
							item.acceptSituation = '未受理'
						}
					})
				} finally {
					this.loading = false;
				}
			}, 

			// 加载更多
			loadMore() {
				if (this.loadStatus === 'nomore') {
					return;
				}
				this.queryParams.pageNo++;
				this.getList()
			},
			onReachBottom() {
				this.loadMore();
			},

			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNo = 1;
				// this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			}, 
			
			openForm3(item) {
				let url;
				if (item.isAnonymity == 0) {

					url = '/pages/work/xiangqing/smjb?id=' + encodeURIComponent(item.id);
				} else if (item.isAnonymity == 1) {
					url = '/pages/work/xiangqing/nmjb?id=' + encodeURIComponent(item.id);
				} else {
					// 否则，跳转到详情页面  
					url = ''
				}
				uni.navigateTo({
					url: url,
				});
			},



		}
	};
</script>
<style lang="scss" scoped>
	.list-item {
		background-color: #FFFFFF;
		margin: 30rpx;
		display: flex;
		flex-direction: row;
		// justify-content: center;
		// align-items: center;
		padding: 10rpx;
		border-radius: 8rpx;
		color: #303133;
		font-size: 32rpx;

		.avatar {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
		}

		.nickname {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}

		.create-time {
			font-size: 24rpx;
			font-weight: 500;
			color: #c4c4c4;
		}

		.content-title {
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;
			line-height: 42rpx;
		}

		.content-img {
			width: 174rpx;
			height: 174rpx;
		}

		.cicon-info-o {
			font-size: 26rpx;
			color: #c4c4c4;
		}

		.foot-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	.btn-box {
		width: 100%;
		height: 120rpx;
		background: #fff;
		border-top: 2rpx solid #eee;
	}

	.tab-btn {
		width: 130rpx;
		height: 62rpx;
		background: #eeeeee;
		border-radius: 31rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		border: 1px solid #e5e5e5;
		margin-right: 10rpx;
	}

	.vertical-button {
		color: #2499f2;
		margin-right: 10px;
		font-size: 14px;
		line-height: 20px;
		padding: 0 10px;
		height: 24px;
		box-sizing: border-box;
		border: none;
		border-radius: 4px;
		margin-left: 5px;
		vertical-align: middle;
		width: 50px;
		hight: 5px;
		margin-top: 7rpx;
		padding: 7rpx 0;
		background-color: white;
	}

	/* 列表  标题 */
	.menu-list {
		margin: 15px 15px;
	}

	.list-cell {
		border-radius: 10px;
		background-color: #fff;
		margin-bottom: 15px;
		padding: 15px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.sub-title {
		font-size: 14px;
		color: #8799a3;
		font-weight: bold;
		margin-right: 5px;
	}

	.date-format {
		margin-left: 5px;
	}

	.vertical-button {
		color: #2499f2;
	}

	.menu-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.text-right {
		margin-left: auto;
		margin-right: 34rpx;
		color: #999;
	}

	.menu-icon {
		color: #007AFF;
		font-size: 16px;
		margin-right: 5px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	/* 换行 */
	.second-title {
		display: block;
	}

	.button-container {
		display: flex;
		flex-direction: column;
		/* 设置为 column 让子元素竖着排列 */
		align-items: flex-start;
		/* 可选，根据需要调整垂直对齐 */
	}


	.list-item {
		background-color: #FFFFFF;
		margin: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		border-radius: 8rpx;
		color: #303133;
		font-size: 32rpx;
	}

	.avatar {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}

	.nickname {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
	}

	.create-time {
		font-size: 24rpx;
		font-weight: 500;
		color: #c4c4c4;
	}

	.content-title {
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
	}

	.content-img {
		width: 174rpx;
		height: 174rpx;
	}

	.cicon-info-o {
		font-size: 26rpx;
		color: #c4c4c4;
	}

	.foot-title {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}


	.btn-box {
		width: 100%;
		height: 120rpx;
		background: #fff;
		border-top: 2rpx solid #eee;
	}

	.tab-btn {
		width: 130rpx;
		height: 62rpx;
		background: #eeeeee;
		border-radius: 31rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		border: 1px solid #e5e5e5;
		margin-right: 10rpx;
	}

	.warp {
		padding: 10px;
	}

	.button {
		margin-bottom: 10px;
	}

	.fixed-bottom-left-btn {
		position: fixed;
		bottom: 50rpx;
		/* 距离底部的距离 */
		left: 50rpx;
		/* 距离左侧的距离 */
		display: flex;
		justify-content: center;
		/* 水平居中，但在这里其实不需要，因为只有一个按钮 */
		align-items: center;
		/* 垂直居中，但在这里其实不需要，因为只有一个按钮 */
		z-index: 999;
		/* 确保按钮在其他内容之上 */
	}

	.circle-btn {
		width: 80rpx;
		/* 圆形按钮的直径 */
		height: 80rpx;
		/* 圆形按钮的直径 */
		border-radius: 50%;
		/* 设置为50%使其成为圆形 */
		font-size: 60rpx;
		/* 按钮文字大小 */
		line-height: 80rpx;
		/* 垂直居中文字 */
		text-align: center;
		/* 水平居中文字 */
		color: #fff;
		/* 按钮文字颜色 */
		background-color: #007aff;
		/* 按钮背景色 */
		border: none;
		/* 移除边框 */
		padding: 0;
		/* 移除内边距 */
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
		/* 可选，添加阴影效果 */
		/* 添加 opacity 属性以设置透明度，例如 0.8 是80%的不透明度 */
		opacity: 0.85;
	}

	.title-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.time-container {
		margin-top: 10px;
		color: #666;
	}

	.button-container {
		display: flex;
		justify-content: flex-start;
		margin-top: 15px;
	}

	.vertical-button {
		margin-right: 10px;
		width: 70px;
		hight: 5px;
		/* 你可以在这里添加按钮的样式 */
		margin-bottom: 10px;
		/* 可选，根据需要添加垂直间距 */
	}

	.fixed-bottom-left-btn {
		position: fixed;
		bottom: 20px;
		left: 20px;
	}

	.circle-btn {
		border-radius: 50%;
		padding: 5px 10px;
	}

	.vertical-button {

		font-size: 14px;
		line-height: 20px;
		padding: 0 10px;
		height: 24px;
		box-sizing: border-box;
		border: none;
		border-radius: 4px;
		margin-left: 5px;
		vertical-align: middle;
		width: 50px;
		hight: 5px;
		margin-top: 7rpx;
		padding: 7rpx 0;
		background-color: #FFFFFF;
	}

	/* 	.list-cell-arrow::before {
		    content: '';
		    height: 10px;
		    width: 10px;
		    border-width: 2px 2px 0 0;
		    border-color: #c0c0c0;
		    border-style: solid;
		    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
		    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
		    position: absolute;
		    top: 50%;
		    margin-top: -6px;
		  } */
</style>